<template>
<div class="detail-wrap">
    <div class="detail-left">
        <div class="product-board">
            <img :src="getUrl"/>
            <ul>
                <router-link  active-class='active' :to="{path:'/detail/'+item.tag}" tag='li' v-for="item in detailNav">
                    {{item.title}}
                </router-link>
            </ul>
        </div>
    </div>
    <div class="detail-right">
        <router-view></router-view>
    </div>
</div>
</template>
<script>
export default{
    name:'detail',
    data(){
        return{
         //左侧导航
         detailNav:[
             {
                 img:require('../assets/imgae/1.jpg'),
                 title:'开放产品',
                 tag:"one"
             },
              {
                  img:require('../assets/imgae/2.jpg'),
                 title:'开放产品',
                 tag:"two"
             },
              {
                  img:require('../assets/imgae/3.jpg'),
                 title:'开放产品',
                 tag:"three"
             },
              {
                  img:require('../assets/imgae/4.jpg'),
                 title:'开放产品',
                 tag:"four"
             }
         ],
         //根据路径来变化图片
         imgUrl:{
                   "/detail/one" : require("../assets/imgae/1.jpg"),
                    "/detail/two" : require("../assets/imgae/2.jpg"),
                    "/detail/three" : require("../assets/imgae/3.jpg"),
                    "/detail/four" : require("../assets/imgae/4.jpg"),
            } 
        }
    },
   computed:{
            getUrl(){
                console.log(this.$route.path);
                return this.imgUrl[this.$route.path];
            }
            
        }
}
</script>
<style scoped>
.detail-wrap{
    width:1200px;
    margin:0 auto;
    overflow: hidden;
    padding-top:20px;
}
.detail-left{
    float: left;
    width:200px;
    text-align:center;
}
.detail-right{
    float: left;
    width:980px;
    margin-left:20px;
}
.product-board{border:1px solid red;}
.product-board li.active,
.product-board li:hover{
    background:#4fc08d;
    color:#fff;
}
.product-board li{line-height:30px;height:30px;}
.product-board li a{display:block;}
/* .sales-board{background:#fff;} */


</style>